<template>
    <div class="router-body">
        <RouterView ref="routerView" />
    </div>
    <BeeFooter />
</template>

<script setup lang="ts" name="AppView">

import BeeFooter from '@/components/BeeFooter.vue';

import AOS from 'aos'
import 'aos/dist/aos.css'

import { nextTick, onMounted, ref, watch } from 'vue';
import { useRoute } from 'vue-router';

const route = useRoute()
const routerView = ref()

onMounted(() => {
    initAOS()
    addAosToSections()
})

function initAOS() {
    AOS.init({
        offset: 200,      // 偏移（px）
        delay: 0,         // 延迟（ms）
        duration: 500,    // 动画时长（ms）
        easing: 'ease',   // 缓动函数
        once: false,      // 是否只执行一次
    })
}

// 为所有 section 添加动画属性
function addAosToSections() {
    // 等待dom更新完成
    nextTick(() => {

        const pageRoot = routerView.value?.$el
        if (!pageRoot) return

        const sections = pageRoot.querySelectorAll('section')
        console.log(sections);

        sections.forEach((section: HTMLElement, idx: number) => {
            section.setAttribute('data-aos', 'fade-up')
        });

        AOS.refreshHard()
    })
}

watch(
    () => route.path,
    () => {
        setTimeout(addAosToSections, 50);
    },
    {
        immediate: true
    }
)

</script>

<style scoped>
/* .router-body {
    padding: 0 2rem;
    margin-bottom: 4rem;
} */
</style>